<h3>Overview</h3>
In w2ui library there are several global variables. If you link w2ui.js as "text/javascript":
<textarea class="html">
<script type="module">
    import { w2utils, w2alert } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
    w2alert(w2utils.base64encode('some text'))
</script>
</textarea>

Following global object and function will be defined:
<ul>
    <li><b><a href="#w2ui">w2ui</a></b> - object that holds all created widgets</li>
    <li><b><a href="#w2locale">w2locale</a></b> - locale object</li>
    <li><b><a href="#w2utils">w2utils</a></b> - utilities object</li>
    <li><b><a href="#w2popup">w2popup</a></b> - popop object</li>
    <li><b><a href="#w2alert">w2alert</a></b> - alert function</li>
    <li><b><a href="#w2confirm">w2confirm</a></b> - confirm function</li>
    <li><b><a href="#w2prompt">w2prompt</a></b> - prompot function</li>
</ul>
And following global classes (see <a href="#extend">extending w2ui</a>)
<ul>
    <li><b>w2base</b> - base class, implements event handling, can be exteded</li>
    <li><b>w2field</b> - field class, can be extended</li>
    <li><b>w2form</b> - form class, can be extended</li>
    <li><b>w2grid</b> - grid class, can be extended</li>
    <li><b>w2layout</b> - layout class, can be extended</li>
    <li><b>w2sidebar</b> - sidebar class, can be extended</li>
    <li><b>w2tabs</b> - tabs class, can be extended</li>
    <li><b>w2toolbar</b> - toolbar class, can be extended</li>
</ul>

However, starting with version 2.0, you can load library as ES6 module and these variables will not be registered globally
by default. If you link w2ui as type "module"
<textarea class="html">
&lt;script type="module" src="w2ui.es6.min.js"&gt;&lt;/script&gt;
</textarea>

There will be no global variables and it makes no sense to link it this way, but load proper class for each script where
you need it
<textarea class="javascript">
import { w2ui, w2utils, w2grid } from "w2ui.es6.min.js"
</textarea>

You can also link ES6 modules and auto-register globals if you do
<textarea class="html">
&lt;script type="module" src="w2ui.es6.min.js?globals"&gt;&lt;/script&gt;
</textarea>

<h4 id="w2ui">w2ui</h4>

All objects you create - layouts, grids, toolbars, sidebars, tabs, forms - will be attached to global w2ui object.
Initially it is an empty object, but as soon as you start creating widgets, they will become part of
this object. This object serves two important purposes:
<ul class="general">
    <li>It provides a common and uniform way for accessing created objects</li>
    <li>It makes sure that you will not overwrite already created object (object name must be unique)</li>
</ul>

For example, if you created a grid with name myGrid then it can be accessed in the following manner:

<textarea class="javascript">
w2ui['myGrid'].get(3); // returns record with id=3
// or
w2ui.myGrid.get(3);
</textarea>

<h4 id="w2locale">w2locale</h4>

This object holds all variables for localization purposes, such as date and tiem format, currency format, number format,
days of weeks, months names, and translation phrases.
<div style="height: 20px"></div>

To load different locale use <a href="w2utils.locale">w2utils.locale</a>

<h4 id="w2utils">w2utils</h4>

This global object has useful functions for data validation, data sanitation, data formatting, encoding, etc.
For example, you can check if a string is in email format by:

<textarea class="javascript">
w2utils.isEmail('som@email.com'); // returns true if the string is a valid email
</textarea>

See <a href="<?=$site_root?>/docs/utils/methods">w2utils.methods</a> for more information.

<h4 id="w2popup">w2popup</h4>

Generic dialog object
<textarea class="javascript">
w2popup.open({
    title: 'Title',
    body: 'Body'
})
</textarea>

<h4 id="w2alert">w2alert</h4>

Alert dialog
<textarea class="javascript">
w2alert('some alert')
</textarea>

<h4 id="w2confirm">w2confirm</h4>

Confirm dialog
<textarea class="javascript">
w2confirm('Question')
    .yes(() => { ... })
    .no(() => { ... })
</textarea>

<h4 id="w2prompt">w2prompt</h4>

Generic prompt dialog
<textarea class="javascript">
w2prompt('Enter age')
    .change(() => { ... })
    .ok(() => { ... })
</textarea>

<h3>Extending w2ui</h3>

All w2ui classes can be extended and in such way a new and/or custom functionality can be added to grid, toolbar,
sidebar, tabs, etc. For example, to extend a grid, do the following:

<textarea class="javascript">
import { w2grid } from "w2ui.es6.min.js"

class w2customGrid extends w2grid {
    constructor() {
        super()
        ...
    }

    // custom methods
}
</textarea>